<template>
    <div>
        <div style="padding-left: 20px;padding-right: 20px">
            <div class="avatar-box">
                <el-avatar style="padding: 2px;background-color: white"
                           :size="48" :src="avImg"></el-avatar>
                <div style="display: flex;flex-direction: column;margin-left: 20px">
                    <div style="font-weight: bold;font-family: Poppins">
                        {{ currentUser.username }}
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 5px">
                        <div style="border-radius: 50px;width:10px;height: 10px;background-color: #34c38f"/>

                        <div style="color: #788294;font-size: 14px;margin-left: 10px">
                            Active
                        </div>
                    </div>
                </div>
            </div>
            <!--        下划线-->
            <div style="width: 100%;height: 0.3px;background-color: #d5d5d5;margin-top: 20px;margin-bottom: 20px"/>


            <el-input class="chat-search" prefix-icon="el-icon-search" v-model="search"
                      placeholder="search"></el-input>

            <div style="display: flex;background-color: white;margin-top: 23px;margin-bottom: 20px">

                <el-row style="width: 100%">
                    <el-col :span="8">
                        <div class="chat-main-menu-button" @click="toggleMenu(1)"
                             v-bind:class="{menuSelected:this.menuIndex===1}">
                            Chat
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="chat-main-menu-button" @click="toggleMenu(2)"
                             v-bind:class="{menuSelected:this.menuIndex===2}">
                            Groups
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="chat-main-menu-button" @click="toggleMenu(3)"
                             v-bind:class="{menuSelected:this.menuIndex===3}">
                            Contacts
                        </div>
                    </el-col>
                </el-row>
            </div>
            <transition name="ttg" mode="out-in">
                <ChatList :userList="userList" v-bind="$attrs" v-on="$listeners" key="1" v-if="menuIndex===1"/>
                <ChatGroups key="2" v-if="menuIndex===2"/>
                <ChatContacts key="3" v-if="menuIndex===3"/>
            </transition>
        </div>

    </div>
</template>

<script>
import ChatList from "@/components/Chat/ChatList";
import ChatGroups from "@/components/Chat/ChatGroups";
import ChatContacts from "@/components/Chat/ChatContacts";

export default {
    name: "ChatMain",
    props: ["userList"],
    components: {ChatContacts, ChatGroups, ChatList},
    data() {
        return {
            avImg: require("@/assets/icon/3.png"),
            search: "",
            menuIndex: 1,
            currentUser:{}
        }
    },
    mounted() {
        this.currentUser = this.$store.getters.getUser
    },
    methods: {
        toChatRoom() {
            this.toggle("chatroom", "enter")
        },
        toggleMenu(menuIndex) {
            this.menuIndex = menuIndex
        },
    }

}
</script>

<style scoped>
.avatar-box {

    display: flex;
    align-items: center;

}

.ttg-enter-active, .ttg-leave-active {
    transition: opacity .3s ease;
}

.ttg-enter, .ttg-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */
{
    opacity: 0;
}

.chat-search >>> .el-input__inner {
    -moz-appearance: none;
    font-size: 16px;

    border-radius: 20px;
    border: none;
    color: #313131;
    outline: 0;

}

.chat-main-menu-button {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
    color: #6e6e71;
    border-radius: 5px;
    cursor: pointer;
    transition: all ease-in-out 300ms;
}

.chat-main-menu-button:hover {
    color: #556ee6;

}

.menuSelected {
    background-color: #556ee6;
    color: white;
}

.menuSelected:hover {
    color: white;
}
</style>